<!DOCTYPE html>
<html>
<head>
  <title>edge-tts</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery.min.js"></script>
  <script src="popper.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <script src="filesaver.min.js"></script>
  <script>
    function setTimer (token, file_name) {
        let timer
        $.ajax({
            url: `http://47.98.108.6:8010/api/v1/tts?token=${token}`,
            type: "GET",
            dataType: "json",
            success: function(data) {
                //console.log(data);
                if (data.message == "Success"){
                    var audio_file_url = data.data.file_path;
                    $("#submit").prop('disabled', false);
                    $("#submit").html( `提交信息` );

                    if (audio_file_url != "" && file_name != "") {
                      $("#audio_html5").attr("src", audio_file_url);

                      $("#audio_download").prop('disabled', false);
                      $("#audio_download").html( `下载音频` );
                      $("#audio_download").off("click").on("click", function(){
                        saveAs(audio_file_url, `${file_name}`);
                      });
                    }

                    }
                }
        })
        .then(function (res) {
            if(res.code == 1){
                timer = setTimeout(() => {
                    setTimer(token, file_name)
                }, 5000)
            }else if(res.code == -1){
                window.alert(res.message);
                clearTimeout(timer) //清理定时任务
            }else {
                clearTimeout(timer) //清理定时任务
            }

        })
        .catch(function (error) {
                console.log(error);
        });
    };

    $(document).ready(function(){
        $("#audio_download").prop('disabled', true);
        $("#audio_download").html( `暂无音频` );
        $("#submit").click(function(){
            $("#submit").prop('disabled', true);
            $("#submit").html( `获取文件中...` );

            var comment = $("#comment").val();
            var sel1 = $("#sel1").val();
            var file_name = $("#file_name").val();
            var token = "";
            $.ajax({
                url: "http://47.98.108.6:8010/api/v1/tts",
                data: JSON.stringify({
                    "platform": "edge",
                    "text": comment,
                    "voice_name": sel1,
                    "timestamp": parseInt(new Date().getTime()/1000)
                }),
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    //console.log(data);
                    if (data.code == -1){
                      window.alert(data.message);
                    }else {
                      token = data.data.token;
                      setTimer(token, file_name);
                    }

                }
            });

        });
    });
  </script>
</head>
<body>

<div class="container">
  <h2>tts-文字转语音(高度拟人、流畅)</h2>
  <p>提交信息后稍等片刻会自动下载合成的音频文件</p>
  <p>问题反馈: https://yuanliao.info/d/4462-tts</p>
  <hr />
  <form>
    <div class="form-group">
      <label for="comment">请输入需要转语音的文字:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
      <div class="form-group">
      <label for="sel1">选择声音:</label>
      <select class="form-control" id="sel1">
        <option>XiaoxiaoNeural</option>
        <option>YunyangNeural</option>
        <option>HiuMaanNeural</option>
        <option>HsiaoChenNeural</option>
        <option>SalmaNeural</option>
        <option>ZariyahNeural</option>
        <option>KalinaNeural</option>
        <option>JoanaNeural</option>
        <option>VlastaNeural</option>
        <option>NiaNeural</option>
        <option>ChristelNeural</option>
        <option>IngridNeural</option>
        <option>LeniNeural</option>
        <option>KatjaNeural</option>
        <option>AthinaNeural</option>
        <option>NatashaNeural</option>
        <option>ClaraNeural</option>
        <option>MiaNeural</option>
        <option>EmilyNeural</option>
        <option>NeerjaNeural</option>
        <option>RosaNeural</option>
        <option>AriaNeural</option>
        <option>GuyNeural</option>
        <option>JennyNeural</option>
        <option>LeahNeural</option>
        <option>ElenaNeural</option>
        <option>SalomeNeural</option>
        <option>ElviraNeural</option>
        <option>DaliaNeural</option>
        <option>AnuNeural</option>
        <option>NooraNeural</option>
        <option>CharlineNeural</option>
        <option>SylvieNeural</option>
        <option>ArianeNeural</option>
        <option>DeniseNeural</option>
        <option>OrlaNeural</option>
        <option>DhwaniNeural</option>
        <option>HilaNeural</option>
        <option>SwaraNeural</option>
        <option>GabrijelaNeural</option>
        <option>NoemiNeural</option>
        <option>GadisNeural</option>
        <option>ElsaNeural</option>
        <option>NanamiNeural</option>
        <option>SunHiNeural</option>
        <option>OnaNeural</option>
        <option>EveritaNeural</option>
        <option>AarohiNeural</option>
        <option>YasminNeural</option>
        <option>GraceNeural</option>
        <option>PernilleNeural</option>
        <option>DenaNeural</option>
        <option>ColetteNeural</option>
        <option>ZofiaNeural</option>
        <option>FranciscaNeural</option>
        <option>RaquelNeural</option>
        <option>AlinaNeural</option>
        <option>SvetlanaNeural</option>
        <option>ViktoriaNeural</option>
        <option>PetraNeural</option>
        <option>SofieNeural</option>
        <option>ZuriNeural</option>
        <option>PallaviNeural</option>
        <option>ShrutiNeural</option>
        <option>PremwadeeNeural</option>
        <option>EmelNeural</option>
        <option>PolinaNeural</option>
        <option>UzmaNeural</option>
        <option>HoaiMyNeural</option>
      </select>
    </div>
      <div class="form-group">
      <label for="file_name">文件名:</label>
      <input type="text" class="form-control" id="file_name">
    </div>
      <button type="button" class="btn btn-primary" id="submit">提交信息</button>
      <input type="reset" class="btn btn-info" />
      <button type="button" class="btn btn-info" id="audio_download" >下载音频</button>
      <audio src="" type="audio/mpeg" controls id="audio_html5" class="btn btn-outline-success"></audio>
      <hr />
      tips: 文字更新后都要点击提交信息哦~
  </form>
</div>

</body>
</html>
